Every element the MAVA platform is built from — foundations, brand tokens, commerce and discovery components. Light and dark, three languages, all states visible. Brands inherit this system and override colour, type character and imagery treatment only.
01 · Foundations
Colour · Type · Grid
Neutral palette
Paper — page ground
Card — image wells, bands
Line — hairlines, dividers
Muted — secondary text
Ink — text, primary action
Accent — membership, focus
Two grounds per page maximum. Dark mode swaps the same six roles — never a second palette.
Type scale
Display 44/48
Section 28/32
Body 15/25 — Archivo regular for all running text, product names and prices.
Label 11 · tracking .2em
Meta 10 · tracking .28em
Bodoni Moda for editorial voice, Archivo for interface. Georgian text renders in Noto Sans Georgian at the same sizes; uppercase tracking drops to .12em for Georgian labels.
Grid & rhythm
12 columns · max 1680px · gutters clamp(10–22px) Spacing steps 4 / 8 / 14 / 22 / 36 / 64 / 96 Radius 0 everywhere except colour swatches (50%) Hairline 1px, never a shadow for structure
Image treatment
Product 3:4 · editorial 4:5 · campaign 16:9 full bleed. No rounding, no borders, no drop shadows. Garment shots on Card ground; model shots full bleed.
02 · Brand tokens
One system, seven characters
MAVA
Group · editorial neutral. Bodoni display, ink on paper, no brand colour.
Square corners, uppercase tracked labels, colour only from the active brand token.
04 · Forms
KA / EN / RU tolerant
Fields
Choice controls
Price0 – 3 000 ₾
{{ t.dropPhoto }}
Language stress test
Buttons wrap rather than truncate; nav labels ellipsis at one line. Georgian runs ~35% longer than English — every label box is min-width, never fixed. Uppercase is applied to Georgian with reduced tracking so ascenders stay legible.
Reduced — new price in Outlet orange, original struck through.
Sold out
New Trend
Cashmere crew-neck knit
690 ₾
Unavailable — scrim, no discount colour, follow-up route offered.
07 · Listing controls
Live — try the density row
Jeans ✕Size 30 ✕−30%+ ✕
{{ t.perRow }}
{{ n }}
Density is a browsing preference, not a settings panel: it sits inline with sort, persists per customer, and 1-per-row becomes a full-bleed editorial row on desktop and a single tall card on mobile.